<!--
 * @Description: 当月检测公里数统计
 * @Author: Huang Junjie
 * @Date: 2021-06-01 15:47:57
 * @LastEditTime: 2021-06-24 15:33:11
 * @LastEditors: Huang Junjie
-->
<template>
  <div class="monthly-statistics-of-detection-mileage-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <!-- <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" /> -->
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>当月检测公里数统计</span>
      </div>
      <!-- 标题栏 -->

      <!-- 统计卡内容 -->
      <div class="card-content">
        <el-row type="flex" justify="space-between">
          <el-col class="col-style" :span="6">
            <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/progress-card-bg.png')">
            <el-progress
              class="progress-style"
              type="circle"
              :stroke-width="12"
              :percentage="cardData.card1.percentVlaue"
              status="text"
            >
              <div class="text-one">1C</div>
              <div class="text-two">{{ cardData.card1.value }}Km</div>
            </el-progress>
          </el-col>
          <el-col class="col-style" :span="6">
            <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/progress-card-bg.png')">
            <el-progress
              class="progress-style"
              type="circle"
              :stroke-width="12"
              :percentage="cardData.card2.percentVlaue"
              status="text"
            >
              <div class="text-one">2C</div>
              <div class="text-two">{{ cardData.card2.value }}Km</div>
            </el-progress>
          </el-col>
          <el-col class="col-style" :span="6">
            <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/progress-card-bg.png')">
            <el-progress
              class="progress-style"
              type="circle"
              :stroke-width="12"
              :percentage="cardData.card3.percentVlaue"
              status="text"
            >
              <div class="text-one">3C</div>
              <div class="text-two">{{ cardData.card3.value }}Km</div>
            </el-progress>
          </el-col>
          <el-col class="col-style" :span="6">
            <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/progress-card-bg.png')">
            <el-progress
              class="progress-style"
              type="circle"
              :stroke-width="12"
              :percentage="cardData.card4.percentVlaue"
              status="text"
            >
              <div class="text-one">4C</div>
              <div class="text-two">{{ cardData.card4.value }}Km</div>
            </el-progress>
          </el-col>
        </el-row>
      </div>
      <!-- 统计卡内容 -->

      <!-- 统计标题 -->
      <div class="statistics-title">
        完成检测
        <span class="num">34.2</span>
        公里
      </div>
      <!-- 统计标题 -->
    </div>

    <!-- 用于改变环形进度条渐变色 -->
    <svg width="100%" height="100%">
      <defs>
        <linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color: #029fe4;" stop-opacity="0.8" />
          <stop offset="100%" style="stop-color: #05ffe1;" stop-opacity="1" />
        </linearGradient>
      </defs>
    </svg>
    <!-- 用于改变环形进度条渐变色 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardData: {
        card1: { value: 0, total: 0, percentVlaue: 0 },
        card2: { value: 0, total: 0, percentVlaue: 0 },
        card3: { value: 0, total: 0, percentVlaue: 0 },
        card4: { value: 0, total: 0, percentVlaue: 0 }
      }
    };
  },
  mounted() {
    setInterval(() => {
      this.cardData = {
        card1: { value: 2000, total: 8000, percentVlaue: 0 },
        card2: { value: 320, total: 8000, percentVlaue: 0 },
        card3: { value: 6000, total: 8000, percentVlaue: 0 },
        card4: { value: 3500, total: 8000, percentVlaue: 0 }
      };
      this.cardData.card1.percentVlaue = parseFloat((this.cardData.card1.value / this.cardData.card1.total * 100).toFixed(2));
      this.cardData.card2.percentVlaue = parseFloat((this.cardData.card2.value / this.cardData.card2.total * 100).toFixed(2));
      this.cardData.card3.percentVlaue = parseFloat((this.cardData.card3.value / this.cardData.card3.total * 100).toFixed(2));
      this.cardData.card4.percentVlaue = parseFloat((this.cardData.card4.value / this.cardData.card4.total * 100).toFixed(2));
    }, 50);
  }
};
</script>

<style lang="scss" scoped>
::v-deep svg>path:nth-child(2) {
  stroke: url(#write);
}
::v-deep .el-progress-circle {
  width: 95px !important;
  height: 95px !important;
}

.monthly-statistics-of-detection-mileage-style {
  position: relative;
  color: white;
  width: 454px;
  width: 928px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    // border: 2px solid #122a57;
    height: 100%;
    // background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin: 20px 16px 0 16px;
      padding-bottom: 16px;
      align-items: center;
      display: flex;
      // border-bottom: 1px solid #0b62a3;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 0;
      }
    }
    .card-content {
      margin: 0 auto;
      width: 80%;
      .col-style {
        position: relative;
        text-align: center;
        .img {
          margin: 0 auto;
          width: 100px;
        }
        .progress-style {
          position: absolute;
          top: 2.2px;
          left: 45.5px;
          .text-one {
            font-family: SourceHanSansCN-Bold;
            font-size: 23px;
            font-weight: bold;
            color: #3695ff;
          }
          .text-two {
            font-family: SourceHanSansCN-Bold;
            font-size: 14px;
            color: #3695ff;
          }
        }
      }
    }
    .statistics-title {
      margin-top: 20px;
      font-size: 26px;
      text-align: center;
      .num {
        color: #02c2bb;
      }
    }
  }
}
</style>
